<template>
  <div class="mobile-search">
    <div class="mobile-top">
      <img src="../assets/left-top.png" alt="">
    </div>
    <div class="mobile-bottom">
      <div class="mobile-content">
        <div class="cards-image">
          <img src="../assets/index/page2-left-icon.png" alt="" style="width:30%">
        </div>
        <div class="cards-text">
          <ul>
            <li>全品种</li>
            <li>全过程</li>
            <li>全区域</li>
          </ul>
        </div>
        <div class="mobile-btn-group">
          <el-input placeholder="请输入追溯码" v-model="medcode"></el-input>
          <br>
          <el-button type="primary" style="width:100%;margin:5% auto;" @click="codeSearch">查询</el-button>
          <br>
          <el-button type="primary" style="width:100%" @click="goScan">扫一扫</el-button>
        </div>
      </div>
    </div>
    <input type="file" capture=camera accept="image/*" id="scanCode" style="display:none">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        medcode: '',
      };
    },
    methods: {
      codeSearch() {
        if (this.medcode && this.medcode != '') {
          this.$http({
            url: '/batch-code/?cur_code' + this.medcode ,
            methods: 'get',
          }).then(response => {
            this.traceData = response.data
            console.log(response.data)
            this.$message({
              message: '查询成功',
              showClose: true,
              type: 'success'
            });
            this.$store.commit('setSearchCode', {
              code: this.medcode,
            })
            this.$router.push({
              name: 'medcode-detail-m',
            })
          }).catch(error => {
            if (error.response) {
              // The request was made and the server responded with a status code
              // that falls out of the range of 2xx
              console.log(error.response.data);
              // console.log(error.response.status);
              // console.log(error.response.headers);
            } else if (error.request) {
              console.log(error.request);
            } else {
              console.log('Error', error.message);
            }
            // console.log(error.config);
            this.$message({
              message: error.response.data.detail,
              showClose: true,
              type: 'error'
            });
          });
        } else {
          this.$message({
            message: '追溯码错误',
            type: 'warning'
          })
        }

      },
      goScan() {
        $('#scanCode').click()
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {}
  }

</script>

<style scoped>
  .mobile-search {
    height: 100%;
    background: #fff!important;
  }

  .mobile-top {
    width: 100%;
    height: 40%;
    background: url('../assets/background-p1.png')!important;
    background-size: 100% 100%!important;
    text-align: center;
  }

  .mobile-top>img {
    margin-top: 15%;
    width: 80%;
  }

  .mobile-bottom {
    height: 60%;
  }

  .mobile-content {
    width: 80%;
    height: auto;
    box-shadow: 0px 3px 15px 2px #dadada;
    background: #fff;
    position: relative;
    top: -10%;
    border-radius: 5px;
    margin: 0 auto;
  }

  .cards-image {
    padding-top: 5%;
  }

  .cards-text {
    width: 70%;
    margin: 0 auto;
    height: 14px;
  }

  .cards-text>ul>li {
    list-style-type: none;
    width: 33%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
    float: left;
    text-align: center;
    color: #ababab;
    font-size: 14px;
  }

  .cards-text>ul>li:nth-child(1) {
    border-right: 1px solid #ababab
  }

  .cards-text>ul>li:nth-child(2) {
    border-right: 1px solid #ababab
  }

  .mobile-btn-group {
    width: 90%;
    margin: 10% auto;
    padding-bottom: 10%;
  }

  .mobile-search>>>.el-input__inner {
    background-color: #f3f3f3!important;
  }

</style>
